<template>
	<div class="wrap login">
        <nav-bar title="注册" right-text="登录" left-arrow  @click-left="onClickLeft" @click-right="onClickRight"/>
		<div class="from ex-rigster-form">
			<div class="ex-rigster-from-item">
				<span>昵称</span>
				<input type="text" v-model.trim="name" placeholder="请输入昵称">
			</div>
			<div class="ex-rigster-from-item">
				<span>手机号</span>
				<input type="tel" v-model.trim="phone" placeholder="请输入手机号" maxlength="11">
			</div>
			<div class="ex-rigster-from-item">
				<span>登录密码</span>
				<input type="password" v-model.trim="password" placeholder="请输入6-16位密码" maxlength="16">
			</div>
			<div class="ex-rigster-from-item">
				<span>支付密码</span>
				<input type="password" v-model.trim="paypassword" placeholder="请输入6位数字支付密码" maxlength="6">
			</div>
			<div class="code-input ex-rigster-from-item verycode">
				<span>验证码</span>
				<input class="inputCode" v-model.trim="iscodeTest" maxlength="6" @keyup.enter="login" type="tel" placeholder="请输入验证码">
				<codetimeout :phone = "phone" :count.sync = "count"></codetimeout>
			</div>
			<input class="l_button" type="button" value="注册" :disabled="disableBtn" @click = "login()">
		</div>
	</div>
</template>
<script>
    import codetimeout from './../../components/codeTimeout';
	import { NavBar } from 'vant';
	export default {
		data(){
			return {
                name:'',  //昵称
                phone:'', //手机号
                password:'',  //登录密码
                paypassword:'',  //支付密码
                iscodeTest:'',  //验证码
                disableBtn: false,    //防止重复提交
                count: 0,
			}
		},
        mounted(){
            this.codeImg(); //拉取图片验证码
        },
        methods:{
            onClickLeft() {
                this.$router.go(-1);
            },
            onClickRight(){
                this.$router.push({path:'login'})
            },
        	//图片验证码
        	codeImg(){
        		// this.iscodeImg = this.Tools.config.bathUrl+'login/verify.do?_t='+this.Tools.randomString(8)
            },
			//登录
			login(){
				let _this = this;
				if(!this.Tools.regCombination.null.test(_this.name)){
                    this.$toast({message: '请输入昵称', position: 'bottom',duration: 1500})
                }else if(!this.Tools.regCombination.null.test(_this.phone)){
                    this.$toast({message: '请输入手机号', position: 'bottom',duration: 1500})
                }else if(!this.Tools.regCombination.phone.test(_this.phone)){
					this.$toast({message: '请输入正确的手机号', position: 'bottom'})
				}else if(!this.Tools.regCombination.null.test(_this.password)){
					this.$toast({message: '请输入登录密码', position: 'bottom'})
				}else if(this.password.length < 6){
					this.$toast({message: '登录密码长度不能小于六位', position: 'bottom'})
				}else if(!this.Tools.regCombination.null.test(_this.paypassword) || !this.Tools.regCombination.number.test(_this.paypassword)){
					this.$toast({message: '请输入6位数字支付密码', position: 'bottom'})
				}else if(this.paypassword.length < 6){
					this.$toast({message: '支付密码长度不能小于六位', position: 'bottom'})
				}else if (!this.Tools.regCombination.null.test(_this.iscodeTest)){
                    this.$toast({message:'验证码不能为空',position:'bottom'})
                }else{
                	this.register();
				}
			},
			register(){
				let _this = this;
				this.disableBtn = true;
				this.Tools.AXIOS({
					url:'passport/register',
					transformRequest:{
						path: this.$route.query.path,
						nick_name: this.name,
						moble: this.phone,
						login_pwd: this.password,
						pay_pwd: this.paypassword,
						sms_code: this.iscodeTest,
						self_user_id: this.$route.query.uid,
					},
					success: function(res){
						_this.disableBtn = false;
						_this.$toast({message: res.data.msg, position:'bottom',duration: 2000});
						setTimeout(function(){window.location.href = '#/down'},3000);
					},
					error(res){
						_this.disableBtn = false;
					}
				})
			},
		},
		components:{
            NavBar,
            codetimeout:codetimeout,
		}
	}
</script>
<style scoped>
.wrap{width: 100%; position: absolute; height: 100%; background: #fff;}
.login .logo{ width: 45%; display: block; margin: 15.8% auto 5%;}
.login .from{ padding: 0 .5rem .5rem; margin: 0 auto; color: #6F6F6F;}
.login .from .ex-rigster-from-item{ padding: .5rem 0; border-bottom: 1px solid #EDEDED; position: relative;}
.login .from .ex-rigster-from-item span{ font-size: .35rem;}
.login .from .ex-rigster-from-item input{ width: 80%; position: absolute; left: 1.8rem; font-size: .35rem;}
.login .from .ex-rigster-from-item input[type='button']{ background: none; text-align: left;}
.login .from .l_button{ width: 100%; margin: 10% auto 0; padding: .3rem 0; background: #00990B; text-align: center; font-size: .4rem; color: #fff; border-radius: 5px;}
.login .from .code-input{ position: relative;}
.login .from .code-input .code{ width: 2rem; position: absolute; right: 0; z-index: 10; top: .7rem;}
.login .from .code-input .code img{ width: 100%;}
</style>
